<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>My Blogs</title>
		<!-- Bootstrap CSS --><link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">

		
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
		<style type="text/css">
			.click{
				color: #0F0B0D;
			}
			.click:hover{
				border: 1px solid #C4F9E9;
				color: #93A629;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<%- include('../head.ejs')%>
			<div class="panel panel-success text-center">
				<div class="panel-heading">
					<h3 class="panel-title text-left">My Blogs</h3>
				</div>
				<div style="padding-top: 15px;" id="masonry">
					<%for (var i = 0; i < blogs.length; i++) {%>
						<a href="/blog/edit/<%= blogs[i]._id%>">
							<div class="masonry-item col-xs-6 col-sm-4 col-md-4 col-lg-3">
								<div class="panel panel-primary click">
									<div class="panel-heading text-left">
										<h3 class="panel-title"><%= blogs[i].title%></h3>
										<h6>
											<%= blogs[i].author%></strong>
											发布于 <%= blogs[i].add_time.getFullYear()%>年<%= blogs[i].add_time.getMonth()+1%>月<%= blogs[i].add_time.getDate()%>日 &nbsp;<%= blogs[i].tags%> &nbsp; <%= blogs[i].keywords%>
										</h6>
									</div>
									<div class="panel-body text-left">
										<%= blogs[i].zhaiyao%>
									</div>
									<div class="panel-footer text-left">
										👁<strong>(<%= blogs[i].read%>)</strong>
										&nbsp;
										👍<strong>(<%= blogs[i].zan%>)</strong>
										&nbsp;
										👄<strong>(<%= blogs[i].comment%>)</strong>
									</div>
								</div>
							</div>
						</a>
					<%}%>
				</div>
				<div class="panel-footer text-right">
					<%if(pageSize < dataCount){%>
						<!-- 显示分页页码 -->
						<ul class="pagination">
							<li class="disabled">
								<a href="#" title="第<%= pageIndex%>页,共<%= pageCount%>页,有<%= dataCount%>条Blog">第<%= pageIndex%>页,共<%= pageCount%>页,有<%= dataCount%>条Blog</a>
							</li>
							<%if (pageIndex == 1) {%>
								<li class="disabled"><a href="#">上一页</a></li>								
							<%}else{%>
								<li><a href="/blog/index/<%= (pageIndex - 1)%>">上一页</a></li>
							<%}%>
							
							<%if (pageIndex == pageCount) {%>
								<li class="disabled"><a href="#">下一页</a></li>
							<%}else{%>
								<li><a href="/blog/index/<%= (pageIndex + 1)%>">下一页</a></li>
							<%}%>
						</ul>
					<%}else{%>
						<ul class="pagination">
							<li class="disabled">
								<a href="#" title="第<%= pageIndex%>页,共<%= pageCount%>页,有<%= dataCount%>条Blog">第<%= pageIndex%>页,共<%= pageCount%>页,有<%= dataCount%>条Blog</a>
							</li>
						</ul>
					<%}%>
				</div>
			</div>
			<%- include('../footer.ejs')%>
		</div>
		<script type="text/javascript" src="/js/jquery-1.10.2.js"></script>
		<!-- Bootstrap JavaScript -->
		<script type="text/javascript" src="/js/bootstrap.min.js"></script>
		<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
		<script src="/js/masonry-docs.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			$(function() {
				$('.navMyBlog').addClass('active');
			    var $container = $('#masonry');
        		$container.masonry({
	                itemSelector: '.masonry-item',
	                gutter: 0,
	                isAnimated: true,
	            });
			});
		</script>
	</body>
</html>